<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src="为什么需要节点操作.png" alt="">
    <br>
    <img src="节点概述.png" alt="">
    <br>
    <img src="节点概述1.png" alt="">
    <br>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <br>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ol>
    <br>
    <div class="demo">
        <div class="box">
            <div class="erweima"></div>
        </div>
    </div>
    <script>
        // 1. 子节点找父节点 parentNode 找到最近的父节点 如果找不到就返回null
        var erweima = document.querySelector('.erweima');
        var erweimaNode = erweima.parentNode;
        console.log(erweimaNode);

        // 2. 获取所有子节点 childNodes 所有的子节点包含元素节点 文本节点等等
        var ul = document.querySelector('ul');
        var lis = ul.childNodes;
        // 获取到所有节点
        console.log(lis);

        // 3. 获取所有的元素节点 children 常用 只会获取到元素节点
        var lis1 = ul.children;
        console.log(lis1);

        // 4. 获取第一个或最后一个节点m
        var ol = document.querySelector('ol');
        // 获取第一个和最后一个节点(不管是文本还是元素) firstChild: 第一个节点 lastChild：最后一个节点
        var firstC = ol.firstChild;
        var lastC = ol.lastChild;
        console.log(firstC, lastC);
        // (存在兼容性问题IE9)获取第一个和最后一个元素节点 firstElementChild:第一个元素节点 lastElementChild:最后一个元素节点
        var firstE = ol.firstElementChild;
        var lastE = ol.lastElementChild;
        console.log(firstE, lastE);
        // 实际开发的写法
        var firstC1 = ol.children[0];
        var lastC1 = ol.children[ol.children.length - 1];
        console.log(firstC1, lastC1);
    </script>
</body>

</html>